// SmartUI Studio - 项目页面JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // 初始化编辑栏功能
    initEditBar();
    
    // 初始化侧边栏切换功能
    initSidebars();
    
    // 初始化流程编辑器交互
    initFlowEditor();
    
    // 初始化右侧面板状态
    initPanelState();
});

// 初始化面板状态
function initPanelState() {
    // 初始化时确保右侧面板展开状态与类名一致
    const rightPanel = document.querySelector('.right-panel');
    const projectContainer = document.querySelector('.project-container');
    
    if (rightPanel && projectContainer) {
        if (rightPanel.classList.contains('expanded')) {
            projectContainer.classList.remove('right-collapsed');
        } else {
            projectContainer.classList.add('right-collapsed');
        }
    }
}

// 初始化编辑栏功能
function initEditBar() {
    initDeviceSelect();
}

// 初始化侧边栏切换功能
function initSidebars() {
    // 左侧侧边栏
    const leftSidebarBtns = document.querySelectorAll('.left-sidebar .sidebar-btn');
    const leftPanel = document.querySelector('.left-panel');
    
    leftSidebarBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            const wasActive = this.classList.contains('active');
            
            // 切换按钮激活状态
            leftSidebarBtns.forEach(b => b.classList.remove('active'));
            
            // 切换面板显示
            const panels = document.querySelectorAll('.left-panel .panel-content');
            panels.forEach(panel => panel.classList.remove('active'));
            
            // 如果按钮之前是激活状态，则折叠面板，否则展开对应面板
            if (wasActive) {
                leftPanel.classList.remove('expanded');
            } else {
                this.classList.add('active');
                document.getElementById(`${target}-panel`).classList.add('active');
                leftPanel.classList.add('expanded');
            }
        });
    });
    
    // 右侧侧边栏
    const rightSidebarBtns = document.querySelectorAll('.right-sidebar .sidebar-btn');
    const rightPanel = document.querySelector('.right-panel');
    const projectContainer = document.querySelector('.project-container');
    
    rightSidebarBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            const target = this.getAttribute('data-target');
            const wasActive = this.classList.contains('active');
            
            // 切换按钮激活状态
            rightSidebarBtns.forEach(b => b.classList.remove('active'));
            
            // 切换面板显示
            const panels = document.querySelectorAll('.right-panel .panel-content');
            panels.forEach(panel => panel.classList.remove('active'));
            
            // 如果按钮之前是激活状态，则折叠面板，否则展开对应面板
            if (wasActive) {
                rightPanel.classList.remove('expanded');
                projectContainer.classList.add('right-collapsed'); // 添加右侧收起类
            } else {
                this.classList.add('active');
                document.getElementById(`${target}-panel`).classList.add('active');
                rightPanel.classList.add('expanded');
                projectContainer.classList.remove('right-collapsed'); // 移除右侧收起类
            }
        });
    });
    
    // 初始化时确保右侧面板展开状态与类名一致
    if (rightPanel.classList.contains('expanded')) {
        projectContainer.classList.remove('right-collapsed');
    } else {
        projectContainer.classList.add('right-collapsed');
    }
}

// 初始化流程编辑器交互
function initFlowEditor() {
    // 初始化步骤选择对话框
    initStepSelector();
    
    // 初始化步骤操作按钮
    initStepActions();
}

// 初始化步骤选择对话框
function initStepSelector() {
    const searchInput = document.getElementById('stepSearchInput');
    const stepOptions = document.querySelectorAll('.step-option');
    const stepSelectorModal = document.getElementById('stepSelectorModal');
    
    // 当前点击的添加步骤按钮
    let currentAddButton = null;
    
    // 监听添加步骤按钮点击事件，记录当前点击的按钮
    document.querySelectorAll('.add-step-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            currentAddButton = this;
        });
    });
    
    // 监听搜索输入框输入事件
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const searchText = this.value.toLowerCase();
            
            stepOptions.forEach(option => {
                const title = option.querySelector('h6').textContent.toLowerCase();
                const description = option.querySelector('p').textContent.toLowerCase();
                
                if (title.includes(searchText) || description.includes(searchText)) {
                    option.classList.remove('hidden');
                } else {
                    option.classList.add('hidden');
                }
            });
        });
    }
    
    // 监听步骤选项点击事件
    stepOptions.forEach(option => {
        option.addEventListener('click', function() {
            const stepType = this.getAttribute('data-step-type');
            
            // 创建新步骤
            if (currentAddButton) {
                createNewStep(stepType, currentAddButton);
                
                // 关闭对话框
                const modal = bootstrap.Modal.getInstance(stepSelectorModal);
                if (modal) {
                    modal.hide();
                }
                
                // 清空搜索框
                if (searchInput) {
                    searchInput.value = '';
                    // 重置步骤选项显示
                    stepOptions.forEach(opt => opt.classList.remove('hidden'));
                }
            }
        });
    });
    
    // 对话框关闭时重置搜索框和步骤选项
    stepSelectorModal.addEventListener('hidden.bs.modal', function() {
        if (searchInput) {
            searchInput.value = '';
            stepOptions.forEach(opt => opt.classList.remove('hidden'));
        }
    });
}

// 创建新步骤
function createNewStep(stepType, addButton) {
    // 步骤类型配置
    const stepConfig = {
        click: {
            title: '点击元素',
            params: [
                { name: '元素ID', value: 'element_id' },
                { name: '等待时间', value: '1秒' }
            ]
        },
        start_app: {
            title: '启动应用',
            params: [
                { name: '应用包名', value: 'com.example.app' },
                { name: '等待时间', value: '3秒' }
            ]
        },
        stop_app: {
            title: '停止应用',
            params: [
                { name: '应用包名', value: 'com.example.app' }
            ]
        },
        swipe_unlock: {
            title: '滑动解锁',
            params: [
                { name: '方向', value: '上滑' },
                { name: '距离', value: '500像素' }
            ]
        },
        unlock_password: {
            title: '密码解锁',
            params: [
                { name: '密码', value: '******' },
                { name: '等待时间', value: '1秒' }
            ]
        }
    };
    
    // 获取步骤配置
    const config = stepConfig[stepType];
    if (!config) return;
    
    // 创建步骤参数HTML
    let paramsHTML = '';
    config.params.forEach(param => {
        paramsHTML += `
            <div class="step-param">
                <span class="param-name">${param.name}:</span>
                <span class="param-value">${param.value}</span>
            </div>
        `;
    });
    
    // 创建步骤HTML
    const stepHTML = `
        <div class="step-block">
            <div class="step-header">
                <span class="step-title">${config.title}</span>
                <div class="step-actions">
                    <button class="btn btn-sm btn-link" title="执行"><i class="bi bi-play-fill"></i></button>
                    <div class="dropdown">
                        <button class="btn btn-sm btn-link" data-bs-toggle="dropdown" aria-expanded="false" title="更多操作">
                            <i class="bi bi-three-dots-vertical"></i>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">编辑</a></li>
                            <li><a class="dropdown-item" href="#">复制</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger" href="#">删除</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="step-body">
                ${paramsHTML}
            </div>
        </div>
    `;
    
    // 创建连接器HTML
    const connectorHTML = `
        <div class="step-connector">
            <div class="connector-line"></div>
            <button class="add-step-btn" data-bs-toggle="modal" data-bs-target="#stepSelectorModal"><i class="bi bi-plus"></i></button>
        </div>
    `;
    
    // 获取当前连接器的父元素
    const connectorParent = addButton.closest('.step-connector');
    
    // 创建新步骤元素
    const stepElement = document.createElement('div');
    stepElement.innerHTML = stepHTML.trim();
    const newStep = stepElement.firstElementChild;
    
    // 创建新连接器元素
    const connectorElement = document.createElement('div');
    connectorElement.innerHTML = connectorHTML.trim();
    const newConnector = connectorElement.firstElementChild;
    
    // 在连接器后插入新步骤和新连接器
    connectorParent.after(newStep);
    newStep.after(newConnector);
    
    // 初始化新添加的步骤的操作按钮
    initStepActions(newStep);
}

// 初始化步骤操作按钮
function initStepActions(stepElement) {
    // 如果提供了特定步骤元素，则只初始化该元素的操作按钮
    // 否则初始化所有步骤的操作按钮
    const elements = stepElement ? [stepElement] : document.querySelectorAll('.step-block');
    
    elements.forEach(step => {
        // 执行按钮
        const executeBtn = step.querySelector('.step-actions .btn-link[title="执行"]');
        if (executeBtn) {
            executeBtn.addEventListener('click', function() {
                console.log('执行步骤:', step.querySelector('.step-title').textContent);
                // 这里添加执行步骤的逻辑
            });
        }
        
        // 更多操作下拉菜单项
        const dropdownItems = step.querySelectorAll('.dropdown-menu .dropdown-item');
        dropdownItems.forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                const action = this.textContent;
                const stepTitle = step.querySelector('.step-title').textContent;
                
                console.log(`${action}步骤:`, stepTitle);
                
                // 根据操作类型执行不同的逻辑
                if (action === '删除') {
                    // 删除步骤
                    if (confirm('确定要删除这个步骤吗？')) {
                        // 如果是最后一个步骤，则删除步骤和下方的连接器
                        if (step.nextElementSibling && step.nextElementSibling.nextElementSibling) {
                            step.nextElementSibling.remove(); // 删除连接器
                        } 
                        // 如果是第一个步骤，则删除步骤和下方的连接器
                        else if (step.previousElementSibling === null && step.nextElementSibling) {
                            step.nextElementSibling.remove(); // 删除连接器
                        }
                        // 删除步骤
                        step.remove();
                    }
                } else if (action === '编辑') {
                    // 编辑步骤
                    // 在实际应用中，这里应该显示一个模态框让用户编辑步骤参数
                    console.log('编辑步骤:', stepTitle);
                } else if (action === '复制') {
                    // 复制步骤
                    console.log('复制步骤:', stepTitle);
                }
            });
        });
    });
}

// AI助手输入处理
const aiInput = document.querySelector('.ai-input input');
if (aiInput) {
    aiInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendAiMessage();
        }
    });
    
    const sendBtn = document.querySelector('.ai-input button');
    if (sendBtn) {
        sendBtn.addEventListener('click', sendAiMessage);
    }
}

// 发送AI消息
function sendAiMessage() {
    const input = document.querySelector('.ai-input input');
    const message = input.value.trim();
    if (!message) return;
    
    // 清空输入框
    input.value = '';
    
    // 添加用户消息
    const aiChat = document.querySelector('.ai-chat');
    const userMessage = document.createElement('div');
    userMessage.className = 'user-message';
    userMessage.innerHTML = `
        <div class="user-avatar"><i class="bi bi-person"></i></div>
        <div class="user-content">${message}</div>
    `;
    aiChat.appendChild(userMessage);
    
    // 滚动到底部
    aiChat.scrollTop = aiChat.scrollHeight;
    
    // 模拟AI回复
    setTimeout(() => {
        const aiMessage = document.createElement('div');
        aiMessage.className = 'ai-message';
        aiMessage.innerHTML = `
            <div class="ai-avatar"><i class="bi bi-robot"></i></div>
            <div class="ai-content">我已收到您的问题: "${message}"。正在处理中...</div>
        `;
        aiChat.appendChild(aiMessage);
        
        // 滚动到底部
        aiChat.scrollTop = aiChat.scrollHeight;
    }, 500);
}

// 初始化设备选择下拉框功能
function initDeviceSelect() {
    const deviceSelect = document.querySelector('.device-select');
    
    // 初始加载设备列表
    loadDeviceList();
    
    // 建立WebSocket连接
    initDeviceWebSocket();
    
    // 设置WebSocket事件监听
    setupDeviceSocketListeners();
    
    deviceSelect.addEventListener('change', function() {
        const selectedValue = this.value;
        const selectedOption = this.options[this.selectedIndex];
        selectedOption.textContent = selectedOption.textContent; // 更新选中项的文本内容
        const deviceFrame = document.querySelector('.device-frame');
        
        // 显示加载状态
        deviceFrame.innerHTML = `<div class="text-center p-5"><div class="spinner-border" role="status"></div><p class="mt-2">正在获取设备截图...</p></div>`;
        deviceFrame.classList.remove('has-image'); // 移除has-image类，确保加载状态时使用默认尺寸
        
        axios.get(`/api/devices?api=capture_screen&device_sn=${selectedValue}&filename=screen.jpeg`)
            .then(response => {
                if (response.data && response.data.imageUrl) {
                    const imageUrl = response.data.imageUrl;
                    console.log('Image URL:', imageUrl);
                    deviceFrame.innerHTML = `<img src="${imageUrl}" alt="Device Screenshot" class="img-fluid">`;
                    deviceFrame.classList.add('has-image'); // 添加has-image类
                } else if (response.data && response.data.message) {
                    // 显示API返回的错误信息
                    deviceFrame.innerHTML = `<div class="alert alert-warning"><i class="bi bi-exclamation-triangle me-2"></i>${response.data.message}</div>`;
                    deviceFrame.classList.remove('has-image'); // 移除has-image类
                } else {
                    // 未知响应格式
                    deviceFrame.innerHTML = `<div class="alert alert-warning"><i class="bi bi-exclamation-triangle me-2"></i>获取设备截图失败，请检查设备连接状态</div>`;
                    deviceFrame.classList.remove('has-image'); // 移除has-image类
                }
            })
            .catch(error => {
                console.error('Error fetching screenshot:', error);
                // 显示友好的错误信息
                let errorMessage = '获取设备截图失败';
                
                // 检查是否有详细错误信息
                if (error.response && error.response.data) {
                    if (error.response.data.message) {
                        errorMessage = error.response.data.message;
                    } else if (typeof error.response.data === 'string') {
                        errorMessage = error.response.data;
                    }
                } else if (error.message && error.message.includes('Network Error')) {
                    errorMessage = '网络连接错误，请检查服务器状态';
                } else if (error.message) {
                    errorMessage = error.message;
                }
                
                // 如果错误信息包含ZMQ，提供更具体的指导
                if (errorMessage.includes('ZMQ')) {
                    errorMessage = `ZMQ通信错误: ${errorMessage}。请确保设备服务器已启动并正常运行。`;
                }
                
                deviceFrame.innerHTML = `<div class="alert alert-danger"><i class="bi bi-exclamation-triangle me-2"></i>${errorMessage}</div>`;
                deviceFrame.classList.remove('has-image'); // 移除has-image类
            });
    });
}

// 加载设备列表
function loadDeviceList() {
    const deviceSelect = document.querySelector('.device-select');
    axios.get('/api/devices?api=get_devices')
        .then(response => {
            // 保存当前选中的值
            const currentSelectedValue = deviceSelect.value;
            
            // 清空现有选项并重新添加占位符
            deviceSelect.innerHTML = '<option value="0" selected disabled hidden>选择目标设备</option>';

            // 添加新的设备选项
            response.data.devices.forEach(device => {
                const option = document.createElement('option');
                option.value = device.sn;
                option.textContent = device.name;
                deviceSelect.appendChild(option);
                
                // 如果这是之前选中的设备，重新选中它
                if (device.sn.toString() === currentSelectedValue) {
                    option.selected = true;
                }
            });
        })
        .catch(error => {
            console.error('Error fetching devices:', error);
        });
}

/**
 * 初始化设备WebSocket连接
 */
function initDeviceWebSocket() {
    // 检查全局deviceSocket实例是否存在
    if (typeof deviceSocket === 'undefined') {
        console.warn('SocketIOClient not available, skipping WebSocket initialization');
        return;
    }
    
    // 如果尚未连接，则连接到WebSocket服务器
    if (!deviceSocket.connected) {
        deviceSocket.connect();
    }
}

/**
 * 设置设备WebSocket事件监听器
 */
function setupDeviceSocketListeners() {
    // 检查全局deviceSocket实例是否存在
    if (typeof deviceSocket === 'undefined') {
        console.warn('SocketIOClient not available, skipping WebSocket listeners');
        return;
    }
    
    // 监听设备列表更新事件
    deviceSocket.on('refresh_device_list', function(data) {
        console.log('Received device list update:', data);
        // 更新设备下拉列表
        updateDeviceSelectOptions(data);
    });
    
    // 监听设备状态更新事件
    deviceSocket.on('device_status_update', function(data) {
        console.log('Received device status update:', data);
        // 更新设备状态指示器
        updateDeviceStatus(data.device_id, data.status);
    });
    
    // 监听连接事件
    deviceSocket.on('connect', function() {
        console.log('Connected to device WebSocket server');
        // 连接后请求设备列表
        deviceSocket.requestDeviceList();
    });
    
    // 监听断开连接事件
    deviceSocket.on('disconnect', function(reason) {
        console.log('Disconnected from device WebSocket server:', reason);
    });
    
    // 监听错误事件
    deviceSocket.on('error', function(error) {
        console.error('WebSocket error:', error);
    });
}

/**
 * 更新设备下拉列表选项
 * @param {Array} devices - 设备列表数据
 */
function updateDeviceSelectOptions(devices) {
    if (!devices || !Array.isArray(devices)) {
        console.warn('Invalid devices data:', devices);
        return;
    }
    
    const deviceSelect = document.querySelector('.device-select');
    if (!deviceSelect) return;
    
    // 保存当前选中的值
    const currentValue = deviceSelect.value;
    
    // 清空现有选项（保留第一个默认选项）
    while (deviceSelect.options.length > 1) {
        deviceSelect.remove(1);
    }
    
    // 添加新选项
    devices.forEach(device => {
        const option = document.createElement('option');
        option.value = device.sn;
        option.textContent = device.name || device.sn;
        // 添加设备状态作为数据属性
        option.dataset.status = device.status || 'unknown';
        deviceSelect.appendChild(option);
    });
    
    // 尝试恢复之前选中的值
    if (currentValue) {
        deviceSelect.value = currentValue;
        // 如果之前的值不再存在，则触发change事件以加载第一个设备
        if (deviceSelect.value !== currentValue) {
            deviceSelect.dispatchEvent(new Event('change'));
        }
    }
}

/**
 * 更新设备状态指示器
 * @param {string} deviceId - 设备ID
 * @param {string} status - 设备状态
 */
function updateDeviceStatus(deviceId, status) {
    // 更新设备选择下拉列表中的状态
    const deviceSelect = document.querySelector('.device-select');
    if (deviceSelect) {
        for (let i = 0; i < deviceSelect.options.length; i++) {
            const option = deviceSelect.options[i];
            if (option.value === deviceId) {
                // 更新数据属性
                option.dataset.status = status;
                
                // 如果这是当前选中的设备，可能需要更新UI
                if (deviceSelect.value === deviceId) {
                    // 更新设备框架中的状态指示器（如果存在）
                    const statusIndicator = document.querySelector('.device-status-indicator');
                    if (statusIndicator) {
                        statusIndicator.textContent = status;
                        statusIndicator.className = 'device-status-indicator ' + status;
                    }
                }
                break;
            }
        }
    }
}